<template>
	<view class="wrap-recommend" v-if="dataInfo" @click="onClick">
		<view class="wrap-info flex align-center just-between">
			<view class="file">
				<image class="file" v-if="dataInfo.spread_type == 0" :src="$getImageURL(dataInfo.goods.image)" />
				<image class="file" v-else-if="dataInfo.spread_type == 1" :src="$getImageURL(dataInfo.shop.avatar)" />
			</view>

			<view class="info-bg flex column">
				<view class="title-bg flex align-center">
					<view class="title limit-num-line fBold f-30">
						{{ dataInfo.spread_type == 1 ? dataInfo.shop.shopname : dataInfo.goods.title }}
					</view>
				</view>

				<view class="price-bg flex align-center f-24" v-if="dataInfo.spread_type == 0">
					<text>¥</text>
					<text>{{ dataInfo.goods.price }}</text>
				</view>

				<view class="collect f-24" v-else-if="dataInfo.spread_type == 1">
					{{ dataInfo.shop.find_user.fans }}人关注
				</view>
			</view>

			<view class="btn f-24">
				{{ dataInfo.spread_type == 1 ? "进店逛逛" : "立即购买" }}
			</view>
		</view>

		<image class="wrap-img" mode="widthFix" :src="$getImageURL(dataInfo.bg_image)" />
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		methods: {
			/**
			 * 点击
			 */
			onClick() {
				if (this.dataInfo.spread_type == 0) {
					this.$jump.onGoodsDetail(this.dataInfo.goods.id);
				} else if (this.dataInfo.spread_type == 1) {
					this.$jump.onStoreIndex(this.dataInfo.shop.id);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-recommend {
		width: 100%;
		border-radius: 16rpx;
		border: 2rpx solid #eeeeee;
		overflow: hidden;
		padding: 25rpx;
		box-sizing: border-box;

		.wrap-info {
			width: 100%;
			overflow: hidden;
			gap: 18rpx;

			.file {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.info-bg {
				flex: 1;
				overflow: hidden;
				gap: 10rpx;

				.title-bg {
					width: 100%;
					overflow: hidden;
					gap: 10rpx;

					.title {
						--limit-num: 1;
						color: #252525;
					}
				}

				.price-bg {
					color: #eb5c20;
					gap: 5rpx;
				}

				.collect {
					color: #888888;
				}
			}

			.btn {
				background: $theme-gradit-color;
				padding: 0 15rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				border-radius: 28rpx;
				overflow: hidden;
				color: white;
			}
		}

		.wrap-img {
			margin-top: 25rpx;
			width: 100%;
			overflow: hidden;
		}
	}
</style>
